<div class="resp-tabs-container" id="profile">
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a resp-tab-active" role="tab" aria-controls="tab_item-0">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">profile</span>
        <i class="glyphicon glyphicon-chevron-up arrow-tabs"></i>
    </h2>
    <div class="main_content">
        <div class="content">
            <h1>Profile - About Me</h1>
        </div>
        <div class="row">
            <div class="col-md-6 ">
                <div class="title_content">
                    <div class="text_content">brown smith</div>
                    <div class="clear"></div>
                </div>
                <ul class="about">
                    <li>
                        <i class="glyphicon glyphicon-user"></i>
                        <label>姓名</label>
                        <span class="value">{{$ctrl.data.name}}</span>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <i class="glyphicon glyphicon-calendar"></i>
                        <label>出生日期</label>
                        <span class="value">{{$ctrl.data.birthday}}</span>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <i class="glyphicon glyphicon-map-marker"></i>
                        <label>地址</label>
                        <span class="value">{{$ctrl.data.addresss}}</span>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <i class="glyphicon glyphicon-envelope"></i>
                        <label>邮箱</label>
                        <span class="value">{{$ctrl.data.email}}</span>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <i class="glyphicon glyphicon-phone"></i>
                        <label>电话</label>
                        <span class="value">{{$ctrl.data.tel}}</span>
                        <div class="clear"></div>
                    </li>
                    <li>
                        <i class="glyphicon glyphicon-globe"></i>
                        <label>微信</label>
                        <span class="value">{{$ctrl.data.weChat}}</span>
                        <div class="clear"></div>
                    </li>
                </ul>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis,
                    scelerisque mi vitae, congue turpis. </p>
                <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing
                    elit. Etiam nec nulla sagittis, scelerisque mi vitae, congue turpis.</p>
            </div>
            <div class="col-md-6  banner">
                <app-carousel></app-carousel>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div class="title_content">
                    <div class="text_content">MY SERVICE 1</div>
                    <div class="clear"></div>
                </div>
                <div class="col-md-4 pack-service">
                    <div class="service">
                        <div class="service-icon">
                            <i class="fa fa-tag"></i>
                        </div>
                        <div class="service-detail">
                            <h6>Making Money</h6>
                            <p>Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 pack-service">
                    <div class="service">
                        <div class="service-icon">
                            <i class="fa fa-cogs"></i>
                        </div>
                        <div class="service-detail">
                            <h6>EASY TO CUSTOMIZE</h6>
                            <p>Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                        </div>
                    </div>
                </div>
                <div class="col-md-4 pack-service">
                    <div class="service">
                        <div class="service-icon">
                            <i class="fa fa-arrows-alt"></i>
                        </div>
                        <div class="service-detail">
                            <h6>MOVING LET US HELP</h6>
                            <p>Fusce quis interdum ipsum.Suspendi suscipit vehicula sapienid mattis. Lorem ipsum amet consectetur.</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="clear"></div>
        <div class="border-list"></div>
        <div class="row">
            <div class="col-md-12">
                <div class="bottom-p">
                    <div class="title_content">
                        <div class="text_content">MY SERVICE 2</div>
                        <div class="clear"></div>
                    </div>
                    <div class="panel-group">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4>
                                    <a data-toggle="collapse" href="#collapseOne" class="collapse_tabs">
                                        Making Money<i class="glyphicon glyphicon-chevron-up"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseOne" class="panel-collapse in">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                                    ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                                    quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on
                                    it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica
                                    , craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                                    butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
                                    synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4>
                                    <a data-toggle="collapse" href="#collapseTwo" class="collapse_tabs collapsed">
                                        EASY TO CUSTOMIZE<i class="glyphicon glyphicon-chevron-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseTwo" class="panel-collapse collapse">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                                    ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                                    quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on
                                    it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica
                                    , craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                                    butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
                                    synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4>
                                    <a data-toggle="collapse" href="#collapseThree" class="collapse_tabs collapsed">
                                        MOVING LET US HELP<i class="glyphicon glyphicon-chevron-down"></i>
                                    </a>
                                </h4>
                            </div>
                            <div id="collapseThree" class="panel-collapse collapse">
                                <div class="panel-body">
                                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson
                                    ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck
                                    quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on
                                    it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica
                                    , craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur
                                    butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic
                                    synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.resume">
        <i class="hi-icon fa fa-user icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">resume</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.portfolio">
        <i class="hi-icon fa fa-briefcase icon_menu icon_menu_active"></i>
        <span class="tite-list-resp">  PORTFOLIO</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.blog">
        <i class="hi-icon fa fa-bullhorn icon_menu icon_menu_active"></i>
        <span class="tite-list-resp"> blog</span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
    <h2 class="resp-accordion hi-icon-wrap hi-icon-effect-5 hi-icon-effect-5a" role="tab" aria-controls="tab_item-0" ui-sref="main.contact">
        <i class="hi-icon fa fa-envelope icon_menu"></i>
        <span class="tite-list-resp"> contact </span>
        <i class="glyphicon glyphicon-chevron-down arrow-tabs"></i>
    </h2>
</div>